 #{extends 'common/base.html' /}
<!-- content start -->
<script>
	$(function() {
		$('.chosen-select-no-results').chosen({
			no_results_text : '木有找到匹配的项！'
		});
	})
</script>
<div class="admin-content">
	<div class="am-cf am-padding">
		<div class="am-fl am-cf">
			<strong class="am-text-primary am-text-lg">首页</strong> / <small>统计数据</small>
		</div>
	</div>
	<ul
		class="am-avg-sm-1 am-avg-md-4 am-margin am-padding am-text-center admin-content-list ">
		#{if type=='2'}
		<li><a href="#" class="am-text-warning"><span
				class="am-icon-btn am-icon-briefcase"></span><br />今日领用<br />${useNum}</a></li>
		<li><a href="#" class="am-text-danger"><span
				class="am-icon-btn am-icon-user-md"></span><br />领刀人数<br />${useCount}</a></li>
		<li><a href="#" class="am-text-danger"><span
				class="am-icon-btn am-icon-recycle"></span><br />今日回收<br />${recNum}</a></li>
		<li><a href="#" class="am-text-danger"><span
				class="am-icon-btn am-icon-user-md"></span><br />回收人数<br />${recCount}</a></li>
		#{/if} #{elseif type=='3'}
		<li><a href="#" class="am-text-warning"><span
				class="am-icon-btn am-icon-briefcase"></span><br />今日领用<br />${toDayUseNum}</a></li>
		#{/elseif}
		<!--    
      <li><a href="#" class="am-text-success"><span class="am-icon-btn am-icon-file-text"></span><br/>新增页面<br/>2300</a></li>
      <li><a href="#" class="am-text-secondary"><span class="am-icon-btn am-icon-user-md"></span><br/>在线用户<br/>3000</a></li> -->
	</ul>

	#{if type=='2'}
	<div class="am-g" style="float: left;">
		<div class="am-u-md-6">
			<div class="am-panel am-panel-default">
				<div class="am-panel-hd am-cf"
					data-am-collapse="{target: '#collapse-panel-1'}">
					供应商消耗量<span class="am-icon-chevron-down am-fr"></span>&nbsp;&nbsp;&nbsp;
					<select id="selSupp">
						<option value="6">查询本月</option>
						<option value="1">查询上月</option>
						<option value="2">查询本季度</option>
						<option value="3">查询上季度</option>
						<option value="4">查询本年</option>
						<option value="5">查询去年</option>
					</select>
				</div>
				<div style="height: 300px;" id="suppDiv"></div>


			</div>
		</div>
		<div class="am-u-md-6">
			<div class="am-panel am-panel-default">
				<div class="am-panel-hd am-cf"
					data-am-collapse="{target: '#collapse-panel-1'}">
					刀具平均寿命<span class="am-icon-chevron-down am-fr"></span>&nbsp;&nbsp;&nbsp;
				</div>
				<div style="height: 300px;" id="cutterAvgLife"></div>
			</div>
		</div>
	</div>
	<div class="am-g">

		<div class="am-u-md-6">
			<div class="am-panel am-panel-default">
				<div class="am-panel-hd am-cf"
					data-am-collapse="{target: '#collapse-panel-1'}">
					本年度刀具消耗<span class="am-icon-chevron-down am-fr"></span>&nbsp;&nbsp;&nbsp;
					<select id="selCustCutters" class="chosen-select-no-results">
						<option value="-1">---请选择---</option> ${custCutters} #{if
						custCutters!=null} #{set count:1/} #{list
						items:custCutters.data,as:'bean'}
						<option value="${bean?.cutter_specs}">${bean?.cutter_specs}</option>
						#{/list} #{/if}
					</select>
				</div>
				<div style="height: 300px;" id="cutterConsume"></div>
			</div>
		</div>
		<div class="am-u-md-6">
			<div class="am-panel am-panel-default">
				<div class="am-panel-hd am-cf"
					data-am-collapse="{target: '#collapse-panel-1'}">
					本年度刀具库存<span class="am-icon-chevron-down am-fr"></span>&nbsp;&nbsp;&nbsp;
					<select id="selCutterInventory" class="chosen-select-no-results">
						<option value="-1">---请选择---</option> #{if custCutters!=null}
						#{set count:1/} #{list items:custCutters.data,as:'bean'}
						<option value="${bean?.cutter_specs}">${bean?.cutter_specs}</option>
						#{/list} #{/if}
					</select>
				</div>
				<div style="height: 300px;" id="cutterInventory"></div>
			</div>
		</div>
	</div>
	<div class="am-g">
		<div class="am-u-md-6">
			<div class="am-panel am-panel-default">
				<div class="am-panel-hd am-cf"
					data-am-collapse="{target: '#collapse-panel-1'}">
					本年度领用刀具统计<span class="am-icon-chevron-down am-fr"></span>&nbsp;&nbsp;&nbsp;
					<select id="selUseRecord" class="chosen-select-no-results">
						<option value="-1">---请选择---</option> #{if custCutterSupps!=null}
						#{set count:1/} #{list items:custCutterSupps.data,as:'bean'}
						<option value="${bean?.material_id}">${bean?.cutter_specs}&nbsp;|&nbsp;${bean?.supp_name}</option>
						#{/list} #{/if}
					</select>
				</div>
				<div style="height: 300px;" id="useRecord"></div>
			</div>
		</div>
		<div class="am-u-md-6">
			<div class="am-panel am-panel-default">
				<div class="am-panel-hd am-cf"
					data-am-collapse="{target: '#collapse-panel-1'}">
					本年度回收刀具统计<span class="am-icon-chevron-down am-fr"></span>&nbsp;&nbsp;&nbsp;
					<select id="selRecRecord" class="chosen-select-no-results">
						<option value="-1">---请选择---</option> #{if custCutterSupps!=null}
						#{set count:1/} #{list items:custCutterSupps.data,as:'bean'}
						<option value="${bean?.material_id}">${bean?.cutter_specs}&nbsp;|&nbsp;${bean?.supp_name}</option>
						#{/list} #{/if}
					</select>
				</div>
				<div style="height: 300px;" id="recRecord"></div>
			</div>
		</div>
	</div>
	<div class="am-g">
		<div class="am-u-md-12">
			<div class="am-panel am-panel-default">
				<div class="am-panel-hd am-cf"
					data-am-collapse="{target: '#collapse-panel-1'}">
					本年度技术员平均消耗量<span class="am-icon-chevron-down am-fr"></span>&nbsp;&nbsp;&nbsp;
					<select id="selOperatorComsume" class="chosen-select-no-results">
						<option value="-1">---请选择---</option> #{if custCutterSupps!=null}
						#{set count:1/} #{list items:custCutterSupps.data,as:'bean'}
						<option value="${bean?.material_id}">${bean?.cutter_specs}&nbsp;|&nbsp;${bean?.supp_name}</option>
						#{/list} #{/if}
					</select>
				</div>
				<div style="height: 300px;" id="operatorComsume"></div>
			</div>
		</div>
	</div>
</div>


#{/if}
</div>
<!-- content end -->
<script>
	$(function() {
		suppConsumeSum(6);
		getCutterAvgLife();
		getCutterConsumeList("-1");
		getCutterInventoryList("-1");
		getOperatorComsume("-1");
		$("#selSupp").change(function() {
			suppConsumeSum($(this).val());
		})
		$("#selCustCutters").change(function() {
			getCutterConsumeList($(this).val());
		})
		$("#selCutterInventory").change(function() {
			getCutterInventoryList($(this).val());
		})
		$("#selOperatorComsume").change(function() {
			getOperatorComsume($(this).val());
		})
		$("#selUseRecord").change(function() {
			getUseRecord($(this).val());
		})
		$("#selRecRecord").change(function() {
			getRecRecord($(this).val());
		})
	})
	var consume = [ {
		"value" : "123"
	} ];
	// 基于准备好的dom，初始化echarts图表
	function suppConsumeSum(datetype) {
		$.ajax({
			type : "post",
			data : "dateType=" + datetype,
			url : "getSuppConsumeSum",
			async : false,
			success : function(data) {
				consume = data;
			}
		});
		var suppDiv = document.getElementById('suppDiv');
		var myChart = echarts.init(suppDiv);
		var option = {
			tooltip : {
				trigger : 'item',
				formatter : "{a} <br/>{b} : {c} ({d}%)"
			},
			legend : {
				orient : 'vertical',
				x : 'left',

				data : consume.data
			},
			toolbox : {
				show : true,
				feature : {
					dataView : {
						show : true,
						readOnly : false
					},
					magicType : {
						show : true,
						type : [ 'pie', 'funnel' ],
						option : {
							funnel : {
								x : '25%',
								width : '50%',
								funnelAlign : 'left',
								max : 1548
							}
						}
					},
					restore : {
						show : true
					},
					saveAsImage : {
						show : true
					}
				}
			},
			calculable : true,
			series : [ {
				name : '供应商刀具消耗量',
				type : 'pie',
				radius : '55%',
				center : [ '50%', '60%' ],
				data : consume.data
			} ]
		};
		// 为echarts对象加载数据 
		myChart.setOption(option);
	}
	var cutterAvg = [ {
		"value" : "123"
	} ];
	function getCutterAvgLife() {
		$.ajax({
			type : "post",
			url : "getCutterAvgLife",
			async : false,
			success : function(data) {
				cutterAvg = data;
			}
		});
		var cutterAvgLife = document.getElementById('cutterAvgLife');
		var myChart = echarts.init(cutterAvgLife);
		var option = {
			title : {
				text : '本年度某刀具平均寿命',
			},
			tooltip : {
				trigger : 'axis'
			},
			legend : {
				data : cutterAvg.legendList
			},
			toolbox : {
				show : true,
				feature : {
					mark : {
						show : true
					},
					dataView : {
						show : true,
						readOnly : false
					},
					magicType : {
						show : true,
						type : [ 'line', 'bar' ]
					},
					restore : {
						show : true
					},
					saveAsImage : {
						show : true
					}
				}
			},
			calculable : true,
			xAxis : [ {
				type : 'category',
				data : cutterAvg.xAxisList
			} ],
			yAxis : [ {
				type : 'value'
			} ],
			series : cutterAvg.series
		};
		myChart.setOption(option);
	}
	var cutterConsume = [ {
		"value" : "123"
	} ];
	//消耗量
	function getCutterConsumeList(cutter_specs) {
		$.ajax({
			type : "post",
			url : "getCutterConsumeList",
			data : "cutter_specs=" + cutter_specs,
			async : false,
			success : function(data) {
				cutterConsume = data;
			}
		});
		var cutterConsumeDiv = document.getElementById('cutterConsume');
		var myChart = echarts.init(cutterConsumeDiv);
		var option = {
			title : {
				text : '本年度刀具消耗报表',
			},
			tooltip : {
				trigger : 'axis'
			},
			legend : {
				data : cutterConsume.legendList
			},
			toolbox : {
				show : true,
				feature : {
					mark : {
						show : true
					},
					dataView : {
						show : true,
						readOnly : false
					},
					magicType : {
						show : true,
						type : [ 'line', 'bar' ]
					},
					restore : {
						show : true
					},
					saveAsImage : {
						show : true
					}
				}
			},
			calculable : true,
			xAxis : [ {
				type : 'category',
				data : cutterConsume.xAxisList
			} ],
			yAxis : [ {
				type : 'value'
			} ],
			series : cutterConsume.series
		};
		myChart.setOption(option);
	}
	var cutterInventory = [ {
		"value" : "123"
	} ];
	//刀具库存
	function getCutterInventoryList(cutter_specs) {
		$.ajax({
			type : "post",
			url : "getCutterInventoryList",
			data : "cutter_specs=" + cutter_specs,
			async : false,
			success : function(data) {
				cutterInventory = data;
			}
		});
		var cutterInventoryDiv = document.getElementById('cutterInventory');
		var myChart = echarts.init(cutterInventoryDiv);
		var option = {
			title : {
				text : '本年度刀具使用库存',
			},
			tooltip : {
				trigger : 'axis'
			},
			legend : {
				data : cutterInventory.legendList
			},
			toolbox : {
				show : true,
				feature : {
					mark : {
						show : true
					},
					dataView : {
						show : true,
						readOnly : false
					},
					magicType : {
						show : true,
						type : [ 'line', 'bar' ]
					},
					restore : {
						show : true
					},
					saveAsImage : {
						show : true
					}
				}
			},
			calculable : true,
			xAxis : [ {
				type : 'category',
				data : cutterInventory.xAxisList
			} ],
			yAxis : [ {
				type : 'value'
			} ],
			series : cutterInventory.series
		};
		myChart.setOption(option);
	}
	var operatorComsume = [ {
		"value" : "123"
	} ];
	//刀具库存
	function getOperatorComsume(material_id) {
		$.ajax({
			type : "post",
			url : "getOperatorComsumeList",
			data : "material_id=" + material_id,
			async : false,
			success : function(data) {
				operatorComsume = data;
			}
		});
		var operatorComsumeDiv = document.getElementById('operatorComsume');
		var myChart = echarts.init(operatorComsumeDiv);
		var option = {
			title : {
				text : '本年度操作员平均消耗量',
			},
			tooltip : {
				trigger : 'axis'
			},
			legend : {
				data : operatorComsume.legendList
			},
			toolbox : {
				show : true,
				feature : {
					mark : {
						show : true
					},
					dataView : {
						show : true,
						readOnly : false
					},
					magicType : {
						show : true,
						type : [ 'line', 'bar' ]
					},
					restore : {
						show : true
					},
					saveAsImage : {
						show : true
					}
				}
			},
			calculable : true,
			xAxis : [ {
				type : 'category',
				data : operatorComsume.xAxisList
			} ],
			yAxis : [ {
				type : 'value'
			} ],
			series : operatorComsume.series
		};
		myChart.setOption(option);
	}
	var useRecord = [ {
		"value" : "123"
	} ];
	function getUseRecord(material_id) {
		$.ajax({
			type : "post",
			url : "useRecordMonthStatistics",
			data : "material_id=" + material_id,
			async : false,
			success : function(data) {
				useRecord = data;
			}
		});
		var useRecordDiv = document.getElementById('useRecord');
		var myChart = echarts.init(useRecordDiv);
		var option = {
			title : {
				text : '本年度领用记录统计',
			},
			tooltip : {
				trigger : 'axis'
			},
			legend : {
				data : useRecord.legendList
			},
			toolbox : {
				show : true,
				feature : {
					mark : {
						show : true
					},
					dataView : {
						show : true,
						readOnly : false
					},
					magicType : {
						show : true,
						type : [ 'line', 'bar' ]
					},
					restore : {
						show : true
					},
					saveAsImage : {
						show : true
					}
				}
			},
			calculable : true,
			xAxis : [ {
				type : 'category',
				data : useRecord.xAxisList
			} ],
			yAxis : [ {
				type : 'value'
			} ],
			series : useRecord.series
		};
		myChart.setOption(option);
	}

	var recRecord = [ {
		"value" : "123"
	} ];
	function getRecRecord(material_id) {
		$.ajax({
			type : "post",
			url : "recoveRecordMonthStatistics",
			data : "material_id=" + material_id,
			async : false,
			success : function(data) {
				recRecord = data;
			}
		});
		var recRecordDiv = document.getElementById('recRecord');
		var myChart = echarts.init(recRecordDiv);
		var option = {
			title : {
				text : '本年度回收记录统计',
			},
			tooltip : {
				trigger : 'axis'
			},
			legend : {
				data : recRecord.legendList
			},
			toolbox : {
				show : true,
				feature : {
					mark : {
						show : true
					},
					dataView : {
						show : true,
						readOnly : false
					},
					magicType : {
						show : true,
						type : [ 'line', 'bar' ]
					},
					restore : {
						show : true
					},
					saveAsImage : {
						show : true
					}
				}
			},
			calculable : true,
			xAxis : [ {
				type : 'category',
				data : recRecord.xAxisList
			} ],
			yAxis : [ {
				type : 'value'
			} ],
			series : recRecord.series
		};
		myChart.setOption(option);
	}
</script>